<template>
	<a-modal :title="$t('Create')+$t('Bucket')" v-model='bcreate' @cancel='cancelhandle' width='35%' 
			@ok='subnew' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form' labelAlign="left">
        	<a-form-item :label="$t('Bucket')+$t('Name')" v-bind='formlayout' has-feedback>
            <a-input v-decorator="['name',{
                    rules:[
											{required:true,message:$t('Enter')+$t('Bucket')+$t('Name')},
											{pattern:/^[a-z](?!.*?\.\.)[a-z0-9\-./]{2,62}$/,message: $t('Not_enter_special_characters5')}]
										}]"
					:placeholder="$t('Enter')+$t('Bucket')+$t('Name')">
                </a-input>
            </a-form-item>
            <a-form-item :label="$t('Owner')" v-bind="formlayout">
			    <!-- /^[a-z](?!.*?\.{2}|.*?-)[a-z0-9\-./]{2,62}$/ -->
                <a-select v-decorator="['owner',{
                    rules:[{required:true,message:$t('Choose')+$t('Owner')}]
                }]" :placeholder="$t('Choose')+$t('Owner')" @change="handleOwner">
                    <!-- <a-select-option :value='item'  v-for="(item,index) in $store.state.basebucket.user" :key="index"> -->
                    <a-select-option :value='item'  v-for="(item,index) in $store.state.basebucket" :key="index">
                        {{item}}
                    </a-select-option>
                </a-select>
            </a-form-item>


			<a-form-item :label="$t('区域组')" v-bind="formlayout">
			    <!-- /^[a-z](?!.*?\.{2}|.*?-)[a-z0-9\-./]{2,62}$/ -->
                <a-select v-decorator="['group',{
                    rules:[{required:true,message:$t('Choose')+$t('区域组')}], initialValue: 'pentastor',
                }]" :placeholder="$t('Choose')+$t('区域组')">
                    <!-- <a-select-option :value='item'  v-for="(item,index) in $store.state.basebucket.user" :key="index"> -->
                    <a-select-option :value='item'  v-for="(item,index) in basegroup" :key="index">
                        {{item}}
                    </a-select-option>
                </a-select>
            </a-form-item>

			<a-form-item :label="$t('存储区域')" v-bind="formlayout">
			    <!-- /^[a-z](?!.*?\.{2}|.*?-)[a-z0-9\-./]{2,62}$/ -->
                <a-select v-decorator="['zone_placement',{
                    rules:[{required:true,message:$t('Choose')+$t('存储区域')}], initialValue: 'default-placement'
                }]" :placeholder="$t('Choose')+$t('存储区域')" >
                    <!-- <a-select-option :value='item'  v-for="(item,index) in $store.state.basebucket.user" :key="index"> -->
                    <a-select-option :value='item'  v-for="(item,index) in paramsdata" :key="index">
                        {{item}}
                    </a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item :label="$t('Bucket')+$t('Quota')" v-bind="formlayout" v-if="isAdmin">
                <a-checkbox @change="onChange1" :checked="active1">{{$t('Active')}}</a-checkbox>
                <p v-if="active1 == true">
                	<a-checkbox @change="onChange2" :checked="active2">{{$t('Set-max-space')}}</a-checkbox>
                	<a-checkbox @change="onChange3" :checked="active3">{{$t('Set-max-obj')}}</a-checkbox>
                </p>
				<a-row>
					<a-col :span='16'>
						<a-form-item :label="$t('Max-space')" has-feedback style="margin-bottom: 0;" v-if="active2 == true && active1 == true">
							<!-- <a-input-number :min='1' style="width:100%" v-decorator="['quota.size.value',{
									rules:[{required:true,message:$t('Enter')+ $t('Max-space')}]
								}]" :placeholder="$t('E-g')+'512'">
							</a-input-number> -->
							<a-input style="width:100%" v-decorator="['quota.size.value',{
									rules:[
										{required:true,message:$t('Enter')+ $t('Max-space')},
										{pattern:/^([1-9]|[1-9]\d{1,9})$/,message: $t('Quota_rule_prompt2')}
									]
								}]" :placeholder="$t('E-g')+'512'">
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span='8'>
						<a-form-item :label="$t('Unit')" has-feedback v-if="active2 == true && active1 == true">
							<a-select v-decorator="['quota.size.unit',{
									rules:[{required:true,message:$t('Choose')+ $t('Unit')},{pattern:namePattern,message:$t('Not_enter_special_characters')}]
								}]" :placeholder="$t('Choose')+$t('Unit')">
								<a-select-option v-for='u in uint ' :key='u.val'>{{u.label}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>	
				</a-row>
                <a-form-item :label="$t('Max-obj')" has-feedback v-if="active3 == true && active1 == true">
	                <!-- <a-input-number style="width:100%" v-decorator="['quota.objs',{
	                    rules:[{required:true,message:$t('Enter')+ $t('Max-obj')}]
	                }]" :min='1' :max="10**15" :placeholder="$t('E-g')+'100'">
	                </a-input-number> -->
					<a-input style="width:100%" v-decorator="['quota.objs',{
	                    rules:[
							{required:true,message:$t('Enter')+ $t('Max-obj')},
							{pattern:/^([1-9]|[1-9]\d{1,9})$/,message: $t('Quota_rule_prompt')}
						]
	                }]" :placeholder="$t('E-g')+'100'">
	                </a-input>
	            </a-form-item>
            </a-form-item>
			<!--存储区域-->
            <!-- <a-form-item :label="$t('Storage-area')" v-bind="formlayout">
                <a-radio-group @change="onChange" v-model="tab">
					<a-radio :value="1">{{$t('Default')}}</a-radio>
					<a-radio :value="2">{{$t('Customize')}}</a-radio>
				</a-radio-group>
                <div>
                	<a-select  v-if="tab==1" :disabled="tab==1" v-decorator="['placement',{
	                    rules:[{required:true,message:$t('Choose')+$t('Storage-area')}],
						initialValue:tarname.id
	                }]"  :placeholder="$t('Choose')+$t('Storage-area')">
						注释<a-select-option :value="item.id" v-for="item in $store.state.basebucket.zone" :key="item.id">{{item.id}}</a-select-option>
                	</a-select>
                	<ul v-if="tab==1">
                		<li><span class="slist">{{$t('Area')}}ID:</span>{{tarname.id}}</li>
                		<li><span class="slist">{{$t('Data-pool')}}:</span>{{tarname.data_pool}}</li>
                		<li><span class="slist">{{$t('Index-pool')}}:</span>{{tarname.index_pool}}</li>
                		<li><span class="slist">{{$t('Extra-pool')}}:</span>{{tarname.data_extra_pool}}</li>
                		<li><span class="slist">{{$t('Compress')}}:</span>{{tarname.is_compression == true?$t('Yes'):$t('No')}}</li>
                	</ul>
					
					<a-select v-if="tab==2" v-decorator="['placement2',{
	                    rules:[{required:true,message:$t('Choose')+$t('Storage-area')}],
						initialValue:tarname.id
	                }]"  :placeholder="$t('Choose')+$t('Storage-area')">
						<a-select-option :value="item.id" :key="item.id" v-for="item in $store.state.basebucket.zone">{{item.id}}</a-select-option>
                	</a-select>
                </div>
            </a-form-item> -->
        </a-form>
    </a-modal>
</template>

<script>
	import request from '@/request/request'

	export default {
	    props:['bb','tarname','paramsdata'],
	    data(){
	        return{
            	form:this.$form.createForm(this),
            	formlayout:{
	                labelCol:{span:6},
	                wrapperCol:{span:18}
	            },
	        	bcreate:false,
	        	tab:1,
	        	// value:1,
	        	active1:false,
	        	active2:false,
				active3:false,
				uint:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
				spinning:false,
				isAdmin: false,
				basegroup: ['pentastor'],
	        }
		},
		mounted(){
			
		},
	    watch:{
	    	bb(val){
	    		this.bcreate = val
	    	}
	    },
		methods:{
			onChange (e) {
		      	// if(e.target.value == 1){
				// 	  this.tab = 1
		      	// }if(e.target.value == 2){
		      	// 	this.tab = 2
		      	// }
			},
			onChange1(e){
				this.active1 = !this.active1
			},
			onChange2(e){
				this.active2 = !this.active2
			},
			onChange3(e){
				this.active3 = !this.active3
		    },
			cancelhandle(e){
		        this.form.resetFields();
		        // this.bcreate=false
				this.spinning=false
				this.active1 = false
				this.active2 = false
				this.active3 = false
				this.tab = 1
		        this.$emit('omodal',false, true)
		    },
		    subnew(e){
		        e.preventDefault();
		        this.form.validateFields((err,value)=>{
		            if(!err){
						this.spinning = true;
						if(this.tab == 2){
							value.placement = value.placement2
						}
						// console.log("value", value)
						// const params = {
						// 	name: value.name,
						// 	owner: value.owner,
						// 	zone_placement: value.zone_placement
						// }
						const { group, ...params } = value
						// console.log("params", params)
						request('post', 'rgw/v2/bucket/', params).then(res=>{
							this.model(res.data.id); //返回模板
              this.notice(res.data.id, res.data.params, res.data.flag); //通知列表显示
							// this.gettask();  //任务栏信息
							this.form.resetFields();
							this.$emit('omodal',false, false);
							this.active1 = false;
							this.active2 = false;
							this.active3 = false;
							this.tab = 1;
							this.spinning = false;
						}).catch(err => {
							this.$emit('omodal',false, false);
							this.active1 = false;
							this.active2 = false;
							this.active3 = false;
							this.tab = 1;
							this.spinning = false;
						})
						// this.bcreate=false
		            }
		        })
		    },
			handleOwner(value) {
				if (value == 'admin') this.isAdmin = false
				else this.isAdmin = true
			}
		}
	}
</script>

<style scoped>
	ul{
		margin: 0;
		padding: 0 1em;
		background-color: #e6f4ff;
	}
	ul li{
		list-style: none;
	}
	.slist{
		margin-right: 1em;
		color: #1890ff;
	}
</style>
